<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .swiper{width: 100vw;height: 100vh;}
        #loading{
            position: absolute;width: 100vw;height: 100vh;
            left: 0;
            top:0;
            /* 弹性布局 */
            display: flex;
            /* 横向居中 */
            justify-content: center;
            /* 纵向居中 */
            align-items: center;
            /* 窗口最低高度 */
            min-height: 100vh;
            background: #000000;
            animation: animateBg 5s linear infinite;
            z-index: 1000;
        }
        #loading div{
            /* 相对定位 */
            position: relative;
            width: 120px;
            height: 120px;
        }
        #loading div span{
            /* 绝对定位 */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* calc()函数 动态计算 var()获取style中的--i的值*/
            transform: rotate(calc(18deg * var(--i)));
        }
        #loading div span::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: red;
            box-shadow: 0 0 10px red,0 0 20px red,0 0 40px red,0 0 60px red,0 0 70px red,0 0 100px red;
            animation: move 2s linear infinite;
            /* 让当前动画延时运行 */
            animation-delay: calc(0.1s * var(--i));
        }
        @keyframes move{
            0%{
                transform: scale(1);
            }
            100%{
                transform: scale(0);
            }
        }
        @keyframes animateBg{
            0%{
                filter: hue-rotate(0deg);
            }
            100%{
                filter: hue-rotate(360deg);
            }
        }
        #loading div p{
            color: #F0FFFF;
            margin-top: 50px;
            margin-left: 30px;
        }
        #error{
            position: absolute;width: 100vw;height: 100vh;
            left: 0;
            top:0;
            /* 弹性布局 */
            display: flex;
            /* 横向居中 */
            justify-content: center;
            /* 纵向居中 */
            align-items: center;
            /* 窗口最低高度 */
            min-height: 100vh;
            background: #ffffff;
            z-index: 1001;
            display: none;
        }
        #error span{
            color: #333;
            font-size: 18;
        }
        #canpian{
            position: absolute;
            top: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            animation-duration: 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            background: url('./static/canpian.jpg') center;
            background-size: cover;
            z-index: 100;
        }
        .music-run{
            animation-name: canpian;
        }
        @keyframes canpian {
            from {transform: rotate(0deg);}
            to {transform: rotate(360deg);}
        }
        .swiper .one{
            background: url('./static/bg_index.jpg');
            background-size: cover;
        }
    </style>
    <link rel="stylesheet" href="./static/swiper-bundle.min.css">
    <script src="./static/swiper-bundle.min.js"></script>
</head>
<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide one">
                <p class="text1">亲爱的<span>黎莉莉</span>医生\n2024年即将离我们远去\n在这一年里\n你用医者的慈爱和匠心\n为患者带来了健康与希望\n为医院增添了光彩与成就</p>
            </div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
        <div class="swiper-pagination"></div>
    </div>

    <div id="canpian">
        <audio src="./static/bg-music.mp3" id="audio" loop></audio>
    </div>

    <section id="loading">
        <div id="">
            <p>loading...</p>
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
        <span style="--i:4"></span>
        <span style="--i:5"></span>
        <span style="--i:6"></span>
        <span style="--i:7"></span>
        <span style="--i:8"></span>
        <span style="--i:9"></span>
        <span style="--i:10"></span>
        <span style="--i:11"></span>
        <span style="--i:12"></span>
        <span style="--i:13"></span>
        <span style="--i:14"></span>
        <span style="--i:15"></span>
        <span style="--i:16"></span>
        <span style="--i:17"></span>
        <span style="--i:18"></span>
        <span style="--i:19"></span>
        <span style="--i:20"></span>
        </div>
    </section>

    <div id="error">
        <span>加载内容出错，请刷新重试！</span>
    </div>

    <script>  
        var mySwiper = new Swiper ('.swiper', {
          direction: 'vertical', // 垂直切换选项
          loop: false, // 循环模式选项
          
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          on:{
			init:function(swiper){
		        slide=swiper.slides[0];
                slide.classList.add('ani-slide')
		    },
			transitionStart: function(swiper){
			    for(i=0;i<this.slides.length;i++){
			    	slide=this.slides[i];
			        slide.classList.remove('ani-slide')
				}
		    },
			transitionEnd: function(swiper){
				slide=this.slides[this.activeIndex];
			    slide.classList.add('ani-slide')
		    },
		  }
        })    
        
        function loadData(){
            // 获取URL中的查询字符串（即'?'之后的部分）
            const queryString = location.search.substring(1);
            // 使用URLSearchParams解析查询字符串
            const params = new URLSearchParams(queryString);
            // 获取特定的参数
            const token = params.get('token');
            const empNo = params.get('empNo');
            // fetch('/mobile-doctor/exchangePlatformServices/hospitalData',{
            //     method: 'post',
            //     headers: {
            //         'cr-product-name': 'DoctorAPP',
            //         'cr-platform': 'Android',
            //         'cr-hospital-uuid': 'b8836556fa9546c9947b21b9a8216bf4',
            //         'system': 'Android',
            //         'appClient': 'DoctorApp2.0',
            //         'Authorization': `Bearer ${token}`,
            //         'Content-Type': 'application/json'
            //     },
            //     body: JSON.stringify({
            //         'tradeCode':'mobileDoctor_GetDeptWithEmpNo',
            //         'data': {
            //             'empNo':empNo
            //         }
            //     })
            // })
            // .then((response) => {
            //     if (!response.ok) {
            //       throw new Error(`HTTP 错误！状态：${response.status}`);
            //     }
            //     return response.json();
            // })
            // .then((response) => {
                
            // }).finally(()=>{

            // });
            setTimeout(()=>{
                var loading = document.getElementById('loading')
                loading.style.display = 'none';
                document.querySelector("#canpian").click();
                //var error = document.getElementById('error')
                //error.style.display = 'flex';
            },5000)
        }

        function music(){
            let canpian = document.querySelector("#canpian");
            let music = document.querySelector("#audio");
            canpian.addEventListener('click',function(){
                if(music.paused){
                    canpian.className = 'music-run';
                    music.play();
                }else{
                    music.pause();
                    canpian.className = "";
                }
            },true);
        }
        music();
        loadData();
        </script>
</body>
</html>